<template>
 <div class="cropper-container">
   <div class="horizontal-line"></div>
   <div class="vertical-line"></div>
   <div class="cropper-content">
     <customCropper/>
   </div>
   <div class="horizontal-line-short"></div>
   <div class="vertical-line-short"></div>
 </div>
</template>

<script>
import customCropper from './components/customCropper'
export default {
  name: 'index',
  components:{
    customCropper,
  }
}
</script>

<style lang="scss" scoped>
.cropper-container{
  background-color: white;
  padding: 20px;
  box-shadow: 0 0 12px rgba(0, 0,0 , 0.05);
  height: calc(100vh - 180px);
  position: relative;
}
.cropper-content{
  padding-left: 30px;
}
.horizontal-line{
  position: absolute;
  width: calc(100% - 50px);
  top: 50px;
  border: 3px solid #e5f3fd;
}
.vertical-line{
  position: absolute;
  height: calc(100vh - 180px);
  left: 50px;
  top: 20px;
  border: 3px solid #e5f3fd;
}
.horizontal-line-short{
  position: absolute;
  width: 400px;
  bottom: 50px;
  right: 20px;
  border: 3px solid #e5f3fd;
}
.vertical-line-short{
  position: absolute;
  height: 200px;
  right: 50px;
  bottom: 20px;
  border: 3px solid #e5f3fd;
}
</style>
